<template>
    <div>
        <div id="app" style="padding-top: 50px">
    <nav>
      |<router-link to="/goods">---金币充值---</router-link> |
      <router-link to="/orders">---充值订单---</router-link>|
    </nav>
    <div style="margin: 10px auto; width: 70%">
      <router-view/>
    </div> 
</div>
      <el-table :data="tableData" stripe>
        <el-table-column prop="id" label="序号" align="center"></el-table-column>
        <el-table-column prop="name" label="商品名称" align="center"></el-table-column>
        <el-table-column prop="no" label="商品编号" align="center"></el-table-column>
        <el-table-column prop="price" label="商品价格" align="center"></el-table-column>
        <el-table-column prop="date" label="上架时间" align="center"></el-table-column>
        <el-table-column label="操作" align="center">
          <template v-slot="scope">
            <el-button type="primary" size="small" @click="buy(scope.row)">购买</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </template>
  
  <script>
  import axios from "axios";
  
  export default {
    name: "GoodsViews",
    data() {
      return {
        tableData: []
      };
    },
    created() {
      this.load();
    },
    methods: {
      buy(row) {
        const token = localStorage.getItem('token');
        axios.post('http://127.0.0.1:8080/orders/add', { goodsName: row.name, num: 1, total: row.price * 1 },{
    headers: {
      Authorization: `Bearer ${token}` ,
    }
  }).then(() => {
          this.$message.success('下单成功！请支付');
        });
      },
      load() {
        axios.get('http://127.0.0.1:8080/goods/selectAll').then(response => {
          this.tableData = response.data?.data;
        });
      }
    }
  };
  </script>
  
  <style scoped>
  </style>
  